{# Copyright (c) 2016-2017, NVIDIA CORPORATION.  All rights reserved. #}
<!-- Datasets -->
<div class="col-md-12" ng-show="tab.isSet(1)">
    <div class="row">
        <div class="col-xs-12">
            <div class="pull-right">
                New Dataset
                <ul class="nav nav-pills">
                    {% for category in new_dataset_options.keys()|sort %}
                    {% set options = new_dataset_options[category] %}
                    <li class="dropdown active">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            {{category}} <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-right">
                            {% for id in options.keys()|sort %}
                            {% set option = options[id] %}
                            <li><a href="{{option["url"]}}">{{option["title"]}}</a></li>
                            {% endfor %}
                        </ul>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            <div style="position:absolute; bottom:0">
                <label>Group Jobs:
                    <input type="checkbox"
                           ng-model="jc.storage.show_groups">
                </label>
            </div>
        </div>
    </div>
    <div class="well">
        <div ng-controller="datasets_controller as c">
            {[jobs = (jc.dataset_jobs | filter:search_text | sort_with_empty_at_end:this:jc.storage.show_groups);'']}
            <div class="row">
                <div class="col-xs-12">
                    <!-- Filter -->
                    <div class="pull-right">
                        <form>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
                                    <input type="text" class="form-control" placeholder="Filter" ng-model="search_text">
                                </div>
                            </div>
                        </form>
                    </div>
                    {[enabled = any_selected();'']}
                    {[group_enabled = jc.storage.show_groups && enabled;'']}
                    <!-- Delete Button -->
                    <a class="btn btn-xs btn-danger"
                       ng-disabled="!enabled"
                       ng-click="!enabled || delete_jobs();">
                        Delete
                    </a>
                    <a class="btn btn-xs btn-primary"
                       ng-disabled="!group_enabled"
                       ng-click="!group_enabled || group_jobs();">
                        Group
                    </a>
                </div>
            </div>
            <!-- Table -->
            <table id="datasets-table"
                   ng-mouseleave="mouseleave()"
                   class="table table-bordered table-striped list-group selectable"
                   width="100%">
                <col ng-repeat="field in fields"
                     ng-style="$index == 0 ? '{}' : {'width':visualLength(field.name, field.min_width) + 'px'}">
                <thead>
                    <tr>
                        <th ng-repeat="field in fields">
                            <div ng-click="change_sorting(field.name, $event)">
                                <small>
                                    {[ field.name ]}
                                </small>
                                <i class="glyphicon"
                                   ng-class="get_icon(field.name)" style="width:14px">
                                </i>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody ng-if="jobs.length">
                    <tr ng-repeat-start="job in jobs"
                        ng-hide="true">
                    </tr>
                    <!-- group bar -->
                    <tr class="unselectable group-bar"
                        ng-if="jc.storage.show_groups && ($first || jobs[$index-1].group != job.group)">
                        <td colspan="{[ fields.length ]}" style="background-color:#cccccc">
                            <div ng-click="c.hideRows[job.group] = !c.hideRows[job.group];">
                                <span class="glyphicon"
                                      ng-class="c.hideRows[job.group] ? 'glyphicon-triangle-right' : 'glyphicon-triangle-bottom'">
                                </span>
                                <strong>{[ job.group ? job.group : 'Ungrouped' ]}</strong>
                            </div>
                        </td>
                    </tr>

                    <!-- job rows -->
                    <tr ng-attr-id="{[ job.id ]}"
                        ng-hide="c.hideRows[job.group]"
                        ng-mousedown="mousedown($index, $event)"
                        ng-mousemove="mousemove($index, $event)"
                        ng-mouseup="mouseup($index, $event)"
                        ng-click="click($index, $event)"
                        ng-keydown="keydown($event)"
                        ng-class="{selected:job.selected}">
                        <td>
                            <a href="{{config['URL_PREFIX']}}/jobs/{[ job.id ]}" title="{[job.name]}">
                                {[ job.name | major_name ]}
                            </a>
                            <small>
                                {[ job.name | minor_name ]}
                            </small>
                        </td>
                        <td>
                            {[ job.refs | positive ]}
                        </td>
                        <td>
                            <small>{[ job.extension ]}</small>
                        </td>
                        <td>
                            <span class="badge">{[ job.backend ]}</span>
                        </td>
                        <td class="text-{[job.status_css]}">
                            {[ job.status ]}
                        </td>
                        <td start="{[job.elapsed]}">
                            <small title="{[ print_time_diff(job.elapsed) ]}">
                                {[ print_time_diff_terse(job.elapsed) ]}
                            </small>
                        </td>
                        <td start="{[job.submitted]}">
                            <small ng-if="!is_today(job.submitted)" title="{[ job.submitted * 1000 | date:'medium' ]}">
                                {[ job.submitted * 1000 | date:'MMM d, yy' ]}
                            </small>
                            <small ng-if="is_today(job.submitted)" title="{[ job.submitted * 1000 | date:'medium' ]}">
                                {[ job.submitted * 1000 | date:'h:mm a' ]}
                            </small>
                        </td>
                    </tr>
                    <tr ng-repeat-end
                        ng-hide="true">
                    </tr>
                </tbody>
                <tbody ng-if="jobs.length == 0">
                    <tr>
                        <td colspan="{[fields.length]}">
                            <h5>
                                No Datasets
                            </h5>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
